import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { NavLink } from 'react-router-dom'
import { logout } from '../store/modules/userStore'
function MainMenu() {
  //使用store的数据
  const { user, isLogged } = useSelector(store => store.user)
  //获取store的dispatch
  const dispatch = useDispatch()

  return (
    <div>
      <ul>
        <li>
          <NavLink to='/'>主页</NavLink>
        </li>
        {isLogged && <>
          <li>
            <NavLink to='/profile'>用户信息:{user.username}</NavLink>
          </li>
          <li>
            <NavLink to='/' onClick={() => { dispatch(logout()) }}>登出</NavLink>
          </li>
          <li>
            <NavLink to='/studentList' >学生列表</NavLink>
          </li>
        </>}
        {
          !isLogged && <li>
            <NavLink to='/authForm'>登录/注册</NavLink>
          </li>
        }
      </ul>
    </div>
  )
}

export default MainMenu